<div class="detail-tabs">
    <ul class="nav nav-tabs nav-tabs-pf">
        <li [class.active]="isDesignMode()" [class.disabled]="canSaveSource()"><a (click)="enableDesignMode()">Design</a></li>
        <li [class.active]="isSourceMode()"><a (click)="enableSourceMode()">Source</a></li>
    </ul>
</div>

<!-- Source Mode -->
<div class="detail-actionbar" *ngIf="isSourceMode()">
    <button class="btn btn-default btn-xs" [disabled]="!canFormatSource()" (click)="formatSource()"><span class="fa fa-fw fa-indent"></span> <span>Format</span></button>
    <button class="btn btn-default btn-xs" [disabled]="!canRevertSource()" (click)="revertSource()"><span class="fa fa-fw fa-undo"></span> <span>Revert</span></button>
    <button class="btn btn-primary btn-xs" [disabled]="!canSaveSource()" (click)="saveSource()"><span class="pficon pficon-save"></span> <span>Save</span></button>
    <button class="btn btn-default btn-xs" [disabled]="!canToggleSourceFormat()" (click)="toggleSourceFormat()">
        <span class="fa fa-fw fa-code"></span>
        <span *ngIf="isSourceFormatYaml()">As JSON</span>
        <span *ngIf="isSourceFormatJson()">As YAML</span>
    </button>
</div>
<div class="detail-content" style="position: relative" *ngIf="isSourceMode()">
    <code-editor #sourceEditor
                 [(text)]="source"
                 [theme]="sourceEditorTheme()"
                 [mode]="sourceEditorMode()"
                 [debounceTime]="250"
                 [editorStyle]="{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, 'margin-top': '1px' }"></code-editor>
</div>

<!-- Design Mode -->
<div class="detail-content" *ngIf="isDesignMode()">

    <!-- Info about the API -->
    <info-section [document]="document"></info-section>

    <!-- Contact Info -->
    <contact-section [document]="document"></contact-section>

    <!-- License -->
    <license-section [document]="document"></license-section>

    <!-- Global Tags -->
    <tags-section [document]="document"></tags-section>

    <!-- Global Servers -->
    <servers-section *ngIf="is3xForm()" [parent]="document" [collapsed]="false"
                     [description]="'Configure global servers for your API in this section.  Once defined, servers indicate where to access the API (e.g. host and port).'"></servers-section>

    <!-- Security Schemes -->
    <security-schemes-section [document]="document"></security-schemes-section>

    <!-- Security Requirements -->
    <security-requirements-section [parent]="document" [global]="true"></security-requirements-section>

</div>